<template>
	<div class="bg-bg-1 px-[35px] pt-[15px] flex gap-4">
		<div
			class="w-fit flex flex-col items-center"
			v-for="(item, index) in dataList"
			:class="{ selected: selectedTypeIndex === index }"
			:key="item.paymentMethod">
			<div
				:class="[
					{ '!text-primary': selectedTypeIndex === index },
					'flex items-center justify-center w-[76px] h-[40px] rounded-[10px] mx-auto overflow-hidden'
				]"
				@click="selectRechargeType(item, index)">
				<base-icon
					:name="renderNameIcon(item.paymentMethodCode.toLowerCase())"
					class="text-[28px]" />
			</div>
			<p
				:class="[{ '!text-primary': selectedTypeIndex === index }, 'text-sm text-t-1 text-center']">
				{{ item.text ? $t(item.text) : item.paymentMethod }}
			</p>

			<div v-show="selectedTypeIndex === index" class="text-center h-[12px] text-primary">
				<base-icon name="superior2" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { PropType, ref } from 'vue'
import { WalletDepositKeys, WalletDepositType } from '@/enums'
import { BaseIcon } from '@/components/base'

defineProps({
	dataList: {
		type: Array as PropType<Array<any>>,
		default: () => []
	}
})

const selectedTypeIndex = ref(0)

const emit = defineEmits(['select'])
const selectRechargeType = (item: any, index: number) => {
	selectedTypeIndex.value = index
	const id = item.id
	const type = item.paymentMethodCode
	const paymentMethod = item.paymentMethod
	const list = item.merchantList ? item.merchantList : item.networks
	emit('select', {
		id,
		type,
		paymentMethod,
		list
	})
}

const renderNameIcon = (paymentMethod: WalletDepositKeys) => {
	return WalletDepositType[paymentMethod].icon
}

defineExpose({ selectRechargeType })
</script>
<style scoped lang="scss"></style>
